iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
1
Modern Web

三十天路邊賭場上線了!系列 第 24

DAY24 串接下注狀態、籌碼下注限制

  • 分享至 

  • xImage
  •  

前言

今天來寫個簡單的下注狀態吧!一開始進入遊戲時,都會顯示下局才能投注,然後就必須等到下一局猜會解除,並才可以投注。
https://ithelp.ithome.com.tw/upload/images/20190925/20109783J6r5c8l6Ii.png

狀態訊息

以上主要關注的其實就是WaitNextBetNotify這個組件,就是我們那一條訊息,等待下局才能下注的訊息。
其實也就是直接加到Body上而已!

// ... 省略

export default class Body extends WrapperContainerCenter {
    // ... 省略
  private _waitNextBetNotify: WaitNextBetNotify

  constructor() {
    super()

    // ... 省略

    this._waitNextBetNotify = new WaitNextBetNotify()
    this._centerContainer.addChild(this._table)
    this._centerContainer.addChild(this._chipsLayer)
    this._centerContainer.addChild(this._pokersPlayer)
    this._centerContainer.addChild(this._pokersBanker)
    this._centerContainer.addChild(this._betStatusntf)
    this._centerContainer.addChild(this._waitNextBetNotify)
    this._waitNextBetNotify.setPosition(
      { animation: false },
      this.width / 2 - 80,
      this.height / 2
    )

    this.initIO()
    this.initChips()
  }

  public initChips() {
       // ... 省略
  }

  public initIO() {
    $io.on(cmd.MSG_TB_NTF, (reason: any, data: any) => {
      switch (reason) {
        case cst.TB_NTF_COUNTDOWN_START:
          this._betStatusntf.betNotifyStart()
          this._waitNextBetNotify.setAlpha(true, 0)
          setTimeout(() => this._waitNextBetNotify.removeChildren, 1000)
          break
        case cst.TB_NTF_COUNTDOWN_STOP:
         // ... 省略
        case cst.TB_NTF_PI_RESULT:
         // ... 省略
      }
    })
 // ... 省略
}

串接狀態

我們先來思考目前甚麼時候會顯示,其實最簡單的狀況就是一進去遊戲時,預設都是顯示,直到收到下注開始就會關閉這個動畫。

直接等待TB_NTF_COUNTDOWN_START這個指令來,這個指令代表的是開始下注的意思,因此從這邊關閉再好不過。

$io.on(cmd.MSG_TB_NTF, (reason: any, data: any) => {
  switch (reason) {
    case cst.TB_NTF_COUNTDOWN_START:
      this._betStatusntf.betNotifyStart()
      this._waitNextBetNotify.setAlpha(true, 0)
      setTimeout(() => this._waitNextBetNotify.removeChildren, 1000)
      break
    case cst.TB_NTF_COUNTDOWN_STOP:
      // ... 省略
    case cst.TB_NTF_PI_RESULT:
      // ... 省略
  }
})

初始化籌碼

另外順便做一個部分,就是當我們下注完之後,可能重新整理頁面導致籌碼被清除,於是我們需要在進入頁面時,取得目前我的下注內容,以更新目前桌的狀況。

在開始時直接請求下注資訊,並更新到redux,還要通知chipsLayer放上我們的籌碼!

$io.REQ_USER_BET_INFO().then((data: any) => {
  let _betChip = store.getState().betChip
  store.dispatch(
    actions.updateBetChip({ betChip: plusBet(_betChip, data.bet) })
  )
  this._chipsLayer.addBetChip('bcr', 'users', data.bet)
})

結果

https://ithelp.ithome.com.tw/upload/images/20190925/20109783K1cXMaPynH.png

後記

明天把撲克牌串接完,應該玩的過程就差不多了!就只差多人遊戲的狀況了。


上一篇
DAY23 串接倒數更新、串接下注
下一篇
DAY25 串接開牌動畫
系列文
三十天路邊賭場上線了!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言